<template>
    <div>
        <el-button @click="handleShow">点击弹出</el-button>

        <!--弹出窗-->
        <modal ref="modal_1"
               :title="title"
               @modalOpened="opened">

            <avue-form :option="option"
                       ref="form"
                       v-model="form"
                       @submit="onSubmit"></avue-form>

            <!--底部按钮块, 默认只有"取消"按钮-->
            <template #footerButton>
                <el-button type="primary" icon="el-icon-plus" :loading="loading" @click="$refs.form.submit()">新增</el-button>
                <el-button type="primary" icon="el-icon-circle-check" :loading="loading" @click="$refs.form.submit()">修改</el-button>
                <el-button icon="el-icon-circle-close" @click="$refs.modal_1.handleClose()">取消</el-button>
            </template>
        </modal>
    </div>
</template>

<script>
    import {FormMixin} from "@/mixins/FormMixin";

    export default {
        name: "modalForm",
        data() {
          return {
              title: "我是标题",
              option: {
                  submitBtn: false,
                  emptyBtn: false,
                  column: [
                      {
                          label: '通知标题',
                          prop: 'title',
                          span: 24,
                          row: true,
                          search: true,
                          rules: [
                              {
                                  required: true,
                                  message: '请输入通知标题',
                                  trigger: 'blur',
                              },
                          ],
                      },
                      {
                          label: '通知类型',
                          type: 'select',
                          dicUrl: '/blade-system/dict/dictionary?code=notice',
                          props: {
                              label: 'dictValue',
                              value: 'dictKey',
                          },
                          dataType: 'number',
                          slot: true,
                          prop: 'category',
                          search: true,
                          rules: [
                              {
                                  required: true,
                                  message: '请输入通知类型',
                                  trigger: 'blur',
                              },
                          ],
                      },
                      {
                          label: '通知日期',
                          prop: 'releaseTime',
                          type: 'date',
                          format: 'YYYY-MM-DD HH:mm:ss',
                          valueFormat: 'YYYY-MM-DD HH:mm:ss',
                          rules: [
                              {
                                  required: true,
                                  message: '请输入通知日期',
                                  trigger: 'click',
                              },
                          ],
                      },
                      {
                          label: '通知内容',
                          prop: 'content',
                          component: 'avue-ueditor',
                          options: {
                              action: '/blade-resource/oss/endpoint/put-file',
                              props: {
                                  res: 'data',
                                  url: 'link',
                              },
                          },
                          hide: true,
                          minRows: 4,
                          span: 24,
                      },
                  ],
              },
              // 配置项
              formMixinConfig: {
                  // 对应的api目录下 js文件
                  api: "demo/demo_api", // == @/api/demo/demo_api.js

                  // 启动自动加载详情 只针对默认模式
                  enabledAutoLoadDetail: false,
              },
          }
        },
        mixins: [FormMixin],
        methods: {
            handleShow() {
                this.$refs.modal_1.show();
            },
            /**
             *  modal 被打开
             */
            opened() {
                this.onLoadDetail();
            },
            /**
             * 加载详情之前
             */
            detailBefore() {
                this.form.id = "1123598818738675223";
            },
            /**
             * 提交成功之后
             */
            submitAfter() {
                this.$refs.modal_1.hide()
            }
        }
    }
</script>

<style scoped>

</style>